<template>
  <div class="data-manage">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-input
              v-model="listQuery.userName"
              style="width:200px;"
              placeholder="用户名"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <!--<el-button :loading="downloadLoading" size="medium" style="background-color:#e9ab3e;color:#fff;" @click="handleExport">导出</el-button>-->
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
      <!-- 用户弹窗 调用dialog组件 -->
      <sub-dialog :visiabledialog="Visiabledialog" :dialog-data="dialogData" @changeVisiable="changeVisiable"/>
      <subtable
        :table-label="inviteLabel"
        :table-data="inviteData"
      >
        <!-- 用户名列表项可点击 -->
        <el-table-column slot="first" prop="username" label="用户名" align="center" min-width="10">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickAbout(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="isEnd" prop="actualAmount" label="消费总额(元)" align="center" min-width="10">
          <template slot-scope="scope">
            <span>{{ scope.row.actualAmount }}</span>
          </template>
        </el-table-column>
      </subtable>
      <pagination
        :limit.sync="listQuery.limit"
        :page.sync="listQuery.page"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        v-show="total>0"
      />
    </div>
  </div>
</template>

<script>
  import SubDialog from '@/components/Dialog' // 个人信息弹窗
  import Subtable from '@/components/Eltable' // 表格组件
  import Pagination from '@/components/Pagination' // 分页组件
  import {getEduxcloudUserById, getLearnTotalPager} from '@/api/user/user'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      Pagination,
      SubDialog
    },
    data() {
      return {
        downloadLoading: false,
        Visiabledialog: false,
        dialogData: {},
        picker: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        total: 0,
        // 表头
        inviteLabel: [
          {
            label: '加入班级数', width: '10', prop: 'joinedClassRoomNum'
          }, {
            label: '退出班级数', width: '10', prop: 'exitClassRoomNum'
          }, {
            label: '加入课程数', width: '10', prop: 'joinedCourseNum'
          }, {
            label: '退出课程数', width: '10', prop: 'exitCourseNum'
          }, {
            label: '学完任务数', width: '10', prop: 'finishedTaskNum'
          }
        ],
        // 表格数据 用prop绑定
        inviteData: [],
        allList: [],
        listQuery: {
          daterange: [],
          userName: '',
          page: 1,
          limit: 20
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleClickPush() {
        this.$router.push('/user/detail')
      },
      // dialog子组件触发的函数
      changeVisiable(val) {
        this.Visiabledialog = Boolean(val)
      },
      handleClickAbout(scope) {
        this.Visiabledialog = true
        getEduxcloudUserById(scope.row.userId).then(response => {
          this.dialogData = response.data.eduxcloudUser
        })
      },
      // 改变分页页数
      handleSizeChange(val) {
        this.listQuery.page = 1
        this.listQuery.limit = val.value
        this.getData()
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.listQuery.page = val.value
        this.getData()
      },
      handleFilter() {
        this.getData()
      },
      clearParams() {
        this.listQuery.daterange = []
        this.listQuery.userName = ''
        this.getData()
      },
      getData() {
        const params = {}
        params.userName = this.listQuery.userName
        params.page = this.listQuery.page
        params.limit = this.listQuery.limit
        params.tenantId = getTenantId()
        getLearnTotalPager(params).then(response => {
          this.inviteData = response.data.items
          this.total = response.data.total
        })
      },
      // 导出按钮
      handleExport() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['用户名', '加入班级数', '退出班级数', '加入课程数', '退出课程数', '完成任务数', '消费总额']
          const filterVal = ['userName', 'joinedClassRoomNum', 'exitClassRoomNum', 'joinedCourseNum', 'exitCourseNum', 'finishedTaskNum', 'actualAmount']
          const list = this.allList
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'learnList',
            autoWidth: true,
            bookType: 'xlsx'
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }))
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data-manage {
    padding: 14px 20px 0 20px;

    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }
  }
</style>
